/**
 * DOM 工具类
 */
export class DomUtils {
  /**
   * 创建带属性的DOM元素
   * @param {string} tagName - 元素标签名
   * @param {object} options - 元素属性对象
   * @returns {HTMLElement} 创建的DOM元素
   */
  static create(tagName, options = {}) {
    const element = document.createElement(tagName);
    Object.entries(options).forEach(([key, value]) => {
      if (key === "textContent") {
        element.textContent = value;
      } else if (key === "className") {
        element.className = value;
      } else if (key.startsWith("data-")) {
        element.setAttribute(key, value);
      } else {
        element[key] = value;
      }
    });
    return element;
  }

  /**
   * 将 HTML 字符串转换为 DOM 元素
   * @param {string} strHtml - HTML 字符串
   * @returns {HTMLElement} - 返回解析后的 DOM 元素
   */
  static convertToDom(strHtml) {
    const template = document.createElement("template");
    template.innerHTML = strHtml.trim();
    console.log("Converted DOM:", template.content.firstChild); // 添加调试日志
    return template.content.firstChild;
  }

  /**
   * 将 DOM 元素插入到目标容器中
   * @param {HTMLElement} element - 要插入的 DOM 元素
   * @param {HTMLElement|string} target - 目标容器（可以是 DOM 元素或选择器）
   */
  static insertElement(element, target) {
    const container =
      typeof target === "string" ? document.querySelector(target) : target;
    if (container) {
      container.appendChild(element);
    } else {
      console.error("目标容器未找到");
    }
  }

  /**
   * 替换目标元素为新的 DOM 元素
   * @param {HTMLElement} element - 要插入的 DOM 元素
   * @param {HTMLElement|string} target - 目标容器（可以是 DOM 元素或选择器）
   */
  static replaceElement(element, target) {
    const containerSelector = "#content"; // 固定使用内容容器ID选择器
    const waitForDOM = () => {
      if (document.readyState === "complete") {
        const container = document.querySelector(containerSelector);
        if (container) {
          container.replaceWith(element);
        } else {
          console.error(`目标容器${containerSelector}未找到`);
        }
      } else {
        document.addEventListener("DOMContentLoaded", waitForDOM, {
          once: true,
        }); // 单次监听确保不重复绑定
      }
    };
    waitForDOM();
  }
  // 新增方法
  static renderToContainer(PageClass, containerId) {
    const container = document.getElementById(containerId);
    container.innerHTML = "";
    container.appendChild(new PageClass().render());
  }
}
